<template>
    <div>
        <mu-container class="pre_bootArea">
            <mu-bottom-nav class="bootArea">
                <div class="itemNav"  id="item1">
                    <mu-bottom-nav-item title="喜欢" icon="favorite" to="/"></mu-bottom-nav-item>
                </div>
                <div class="itemNav"  id="item2">
                    <mu-bottom-nav-item title="分类" icon="restore"  to="/sortPage"></mu-bottom-nav-item>
                </div>
                <div class="itemNav"  id="item3">
                   <mu-bottom-nav-item title="我的" icon="location_on" to="/myArea"></mu-bottom-nav-item>
                </div>
            </mu-bottom-nav>
        </mu-container>
    </div>
</template>

<script>

    export default {
        name: "footerArea",
       data(){
            return{

            }
       }
    }
</script>

<style scoped>
    .pre_bootArea{
        width:100%;
        height:60px;
        position:relative;
    }
.bootArea{
    width:100%;
    height:60px;
    position:fixed;
    z-index:999;
    bottom:0px;
}
    .itemNav{
        flex: 1;
    }
    .textBtn{
        width:100%;
        height:30px;
    }
    .active{
        padding-top: 5px;
        padding-bottom: 5px;
        color: #2196f3;
    }
</style>